<template>
  <div class="macaroniDetail">    
    <scroller class='myScroller' :on-infinite="infinite" ref="myScroller" noDataText="无更多数据">
    	<x-header title="通币明细" :left-options="{backText:''}" class='whiteHeader'></x-header>
    	<div>
		    <div class="macaroniSigninList" v-if="allData.length != 0" v-for="item in allData">
		    		<div class="macaroniSigninText">
		    				<div class="macaroniSigninWord">
		    						<p>{{item.REMAEK}}</p>
		    				</div>
		    				<div class="macaroniSigninDate">
		    						<p>{{item.DATE}}</p>
		    				</div>
		    		</div>
		    		<div class="macaroniSigninNum">
		    				<p>+{{item.NUM}}</p>
		    		</div>
		    </div>
		  </div>  
    </scroller>
  </div>
</template>
<script>
/*通币明细*/
import {XHeader} from 'vux';
import { setCookie, getCookie } from '../../util/commonUtils';
import Vue from 'vue'
import VueScroller from 'vue-scroller'
Vue.use(VueScroller)
export default {
  name:"macaroniDetail",
  // 数据
  data(){

    return{
    	userId:'',
    	allData:'',//通币明细数据
    	page:1,//页数
    }
  },
  // 计算属性
  computed:{

  },
  // 创建（实例创建完成）
  created(){
    this.userId=getCookie('loginkey');
    //通币明细    
    this.$fetchPost('/MemberIntegralWeb/integralHistory',{USER_ID:this.userId,PAGE_NO:1}).then(res=>{
    			//console.dir(res);
            if(res.STATUS_CODE == 1){
                this.allData = res.RESULT_DATA;
            }                                 
    },err=>console.log(err));
  },
  // el被创建，并挂载到实例上
  mounted(){

  },
  // 方法（实例中的方法）-----------
  methods:{
    	//加载
    	infinite(){    			    			
    			setTimeout(()=>
    					//通币明细
					    this.$fetchPost('/MemberIntegralWeb/integralHistory',{USER_ID:this.userId,PAGE_NO:this.page}).then(res=>{						    	
					          if(res.STATUS_CODE == 1){
		                		if(res.RESULT_DATA.length == 0){
		                			this.$refs.myScroller.finishInfinite(2);//通知scroller数据全部加载完成
		                			return;
		                		}
		                		this.page++;		                		
		                		this.allData = this.allData.concat(res.RESULT_DATA);//数组数据连接
		                		this.$refs.myScroller.finishInfinite();//通知scroller数据已经加载完成		   
		                		//console.dir(this.allData);
		            		}                                 
					    },err=>console.log(err))
			    ,2000);			    
    	},
  },
  // 子组件
  components:{
    XHeader
  }
}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
.macaroniDetail{
  	.macaroniSigninList{
  			height:0.95rem;
  			background:#fff;
  			display:flex;  	  		
  			border-bottom:0.01rem solid #e2e2e2;		
  			.macaroniSigninText{
  				width:50%;  		  				  				
  					.macaroniSigninWord{  	 
  						height:50%; 											
  						display:flex;
		  				flex-flow:column;
		  				justify-content:center;
  							p{
  									align-self:flex-start;
  									font-size:0.26rem;
  									padding-left:0.08rem;
  							}
  					}
  					.macaroniSigninDate{
  						height:50%;
  						display:flex;
		  				flex-flow:column;
		  				justify-content:center;
  							p{
  									align-self:flex-start;
  									font-size:0.26rem;
  									color:#C9C9CF;
  									padding-left:0.08rem;
  							}
  					}
  			}
  			.macaroniSigninNum{
  				width:50%;
  				display:flex;
  				flex-flow:column;
  				justify-content:center;
  					p{
  							align-self:flex-end;
  							padding-right:0.2rem;
  							font-size:0.28rem;
  							color:#E60000;
  					}
  			}
  	}
}
</style>